<template>
	<view class="ones" style="display: flex;justify-content: space-between;flex-wrap: wrap;">
		<view class="icons" v-for="(item,index) in classbox" :key="index">
			<view class="" :style="{backgroundColor:item.color}">
				<image src="/static/icon.png" style="width:50rpx;height:50rpx" mode=""></image>
			</view>
			<text>{{item.name}}</text>
		</view>
	</view>
</template>

<script setup>
	const classbox = [{
			icon: '',
			name: '推选料理',
			color: "#E6F4DA"
		},
		{
			icon: '',
			name: '食物查询',
			color: "#E1F3FF"
		},
		{
			icon: '',
			name: '食物查询',
			color: ""
		},
		{
			icon: '',
			name: '食物查询',
			color: ""
		},
		{
			icon: '',
			name: '食物查询',
			color: ""
		},

		{
			icon: '',
			name: '食物查询',
			color: ""
		},
		{
			icon: '',
			name: '食物查询',
			color: ""
		},
		{
			icon: '',
			name: '食物查询',
			color: ""
		}
	]
</script>

<style lang="scss" scoped>
	.ones {
		margin-top: 20rpx;
		// 	background-color: #fff;

		.icons {
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 25%;

			>view {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 80rpx;
				height: 80rpx;
				border-radius: $uni-border-radius-base;
			}

			text {
				margin-top: $uni-border-radius-base;
				font-size: 24rpx;
			}
		}
	}
</style>